<template>
	<!-- 书店页面容器 -->
	<view class="bookstore-page">
		<!-- 搜索框区域 -->
		<view class="header">
			<uni-search-bar v-model="searchKeyword" clearButton="none" cancelButton="none" class='search-bar'
				:placeholder="searchKeywordPlaceholder" @focus="navigateToSearch" />
			<view class="category-btn" @click="navigateToCategory">
				<uni-icons type="bars" size="30"></uni-icons>
				<view class="category-text">分类</view>
			</view>
		</view>

		<!-- 标签栏区域 -->
		<scroll-view scroll-x="true" enable-flex="true" :scroll-left="scrollPosition" class="tabs-container">
			<view v-for="(tab, tabIndex) in tabs" :key="tabIndex" class="tab"
				:class="currentTabIndex === tabIndex ? 'active' : ''" @click="handleTabClick(tabIndex)">
				{{ tab }}
			</view>
		</scroll-view>

		<!-- 内容区域 -->
		<swiper :current="currentTabIndex" class="content" @change="handleSwiperChange">
			<swiper-item v-for="(tab, childIndex) in tabs" :key="childIndex">
				<!-- 只有当前激活的标签页才加载对应的组件 -->
				<RecommendContent v-if="isRecommendLoaded && childIndex === currentTabIndex" />
				<ClassicContent v-if="isClassicLoaded && childIndex === currentTabIndex" />
			</swiper-item>
		</swiper>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { ref, Ref } from "vue";
	import ClassicContent from "./components/ClassicContent.vue";
	import RecommendContent from "./components/RecommendContent.vue";
	import { querySearchRecommendAPI } from "@/services/bookstore";

	/**
	 * 页面加载状态
	 */
	const isLoading = ref(false);

	/**
	 * 标签页组件加载状态
	 */
	const isRecommendLoaded = ref(false);
	const isClassicLoaded = ref(false);
	const isKnowledgeLoaded = ref(false);
	const isAudiobookLoaded = ref(false);
	const isDramaLoaded = ref(false);
	const isNewArrivalLoaded = ref(false);

	/**
	 * 搜索关键词
	 */
	const searchKeyword = ref("");

	/**
	 * 推荐搜索书籍名称
	 */
	const searchKeywordPlaceholder = ref("");

	/**
	 * 推荐搜索数据列表
	 */
	const searchRecommendData = ref<string[]>([]);

	/**
	 * 当前推荐搜索数据索引
	 */
	const searchRecommendIndex = ref(0);

	/**
	 * 定时器引用
	 */
	const timer = ref<any>(null);

	/**
	 * 标签页数据
	 */
	const tabs = ref(["推荐", "经典", "知识", "听书", "看剧", "最新上架", '虚幻', '虚幻2', '虚幻3', '虚幻4', '虚幻5', '虚幻6', '虚幻7', '虚幻8', '虚幻9', '虚幻10']);

	/**
	 * 当前标签索引
	 */
	const currentTabIndex = ref(0);

	/**
	 * 滚动位置
	 */
	const scrollPosition = ref(0);

	/**
	 * 标签索引与加载状态的映射对象
	 */
	const tabLoadedMap : Record<number, Ref<boolean>> = {
		0: isRecommendLoaded,
		1: isClassicLoaded,
		2: isKnowledgeLoaded,
		3: isAudiobookLoaded,
		4: isDramaLoaded,
		5: isNewArrivalLoaded,
	};

	/**
	 * 页面加载时触发
	 * 初始化数据和设置
	 */
	onLoad(() => {
		isLoading.value = true;

		// 加载推荐组件
		isRecommendLoaded.value = true;
		fetchSearchRecommendations();
		initSearchRecommendTimer();

		isLoading.value = false;
	});



	/**
	 * 获取推荐搜索数据
	 */
	function fetchSearchRecommendations() {
		searchRecommendData.value = querySearchRecommendAPI();
	}

	/**
	 * 初始化推荐搜索定时器
	 * 每5秒更新一次推荐搜索名称
	 */
	function initSearchRecommendTimer() {
		if (timer.value) {
			clearInterval(timer.value);
		}

		timer.value = setInterval(() => {
			if (searchRecommendData.value.length === 0) {
				return;
			}

			searchKeywordPlaceholder.value = searchRecommendData.value[searchRecommendIndex.value];
			searchKeyword.value = searchRecommendData.value[searchRecommendIndex.value];
			searchRecommendIndex.value = (searchRecommendIndex.value + 1) % searchRecommendData.value.length;
		}, 5000);
	}

	/**
	 * 重置所有组件加载状态
	 */
	function resetLoadedStates() {
		for (const key in tabLoadedMap) {
			tabLoadedMap[key].value = false;
		}
	}

	/**
	 * 处理滑动切换事件
	 * @param e swiper change事件对象
	 */
	function handleSwiperChange(e : any) {
		const newIndex = e.detail.current;
		adjustScrollPosition(newIndex);

		currentTabIndex.value = newIndex;
		resetLoadedStates();

		// 加载对应组件
		const targetLoaded = tabLoadedMap[currentTabIndex.value];
		if (targetLoaded) {
			targetLoaded.value = true;
		}
	}

	/**
	 * 调整滚动位置
	 * @param newIndex 新标签索引
	 */
	function adjustScrollPosition(newIndex : number) {
		// 简单的滚动位置计算，实际项目中可能需要根据标签宽度动态调整
		if (newIndex > 3) {
			scrollPosition.value = (newIndex - 3) * 100;
		} else {
			scrollPosition.value = 0;
		}
	}

	/**
	 * 跳转到搜索页面
	 */
	function navigateToSearch() {
		uni.navigateTo({
			url: "/pages/search/index",
		});
	}

	/**
	 * 处理标签点击事件
	 * @param tabIndex 标签索引
	 */
	function handleTabClick(tabIndex : number) {
		currentTabIndex.value = tabIndex;
		adjustScrollPosition(tabIndex);
	}

	/**
	 * 跳转到分类页面
	 */
	function navigateToCategory() {
		uni.switchTab({
			url: "/pages/category/index"
		});
	}
</script>

<style lang="scss">
	// 书店页面样式
	.bookstore-page {
		display: flex;
		flex-direction: column;
		height: 100vh;

		// 头部样式
		.header {
			height: 60px;
			background: linear-gradient(180deg, #f6ece0 0%, #f8f1eb 50%, #f7f5e6 100%);
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			padding: 0 15rpx;

			// 搜索栏样式
			.search-bar {
				flex: 4;
			}

			// 分类按钮样式
			.category-btn {
				height: 40px;
				flex: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				background-color: #f3f4f6;
				border-radius: 10px;
				margin-left: 10rpx;

				// 分类文本样式
				.category-text {
					margin-left: 5rpx;
					font-size: 24rpx;
				}
			}
		}

		// 标签容器样式
		.tabs-container {
			width: 100%;
			white-space: nowrap;
			padding: 10rpx 0;
			background-color: #fff;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

			// 标签样式
			.tab {
				display: inline-block;
				padding: 8px 16rpx;
				margin: 0 8px;
				font-size: 28rpx;
				color: #737373;
				position: relative;

				// 激活状态样式
				&.active {
					color: #000;
					font-size: 32rpx;
					font-weight: bold;
				}

				// 激活状态下划线
				&.active::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 4rpx;
					background-color: #000;
					border-radius: 2rpx;
				}
			}
		}

		// 内容区域样式
		.content {
			flex: 1;
			background-color: #f3f4f6;
		}
	}
</style>